<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Perfree安装-初始化配置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="Shortcut Icon" href="/static/public/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/public/libs/layui-v2.5.6/layui/css/layui.css">
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/admin/pages/install/css/install.css" rel="stylesheet"/>
</head>
<body>
<div class="p-container">
    <div class="layui-card">
        <div class="layui-card-header">
            <h2 class="install-title">Perfree</h2>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-input-inline"  style="display: none;">
                    <select lay-verify="" type="hidden"></select>
                </div>
                <h3>数据库配置</h3>
                <div class="install-form-box">
                    <b>数据库类型</b>
                    <select name="type" required lay-verify="required" lay-filter="type">
                        <option value="mysql">mysql</option>
                        <option value="sqlite">sqlite</option>
                    </select>
                </div>
               <div id="mysql-message">
                   <div class="install-form-box">
                       <b>数据库地址</b>
                       <input type="text" name="address" placeholder="请输入数据库地址,如127.0.0.1" autocomplete="off" class="layui-input install-input">
                   </div>

                   <div class="install-form-box">
                       <b>数据库端口</b>
                       <input type="text" name="port" placeholder="请输入数据库端口,如3306" autocomplete="off" class="layui-input install-input">
                   </div>

                   <div class="install-form-box">
                       <b>数据库用户名</b>
                       <input type="text" name="userName" placeholder="请输入数据库用户名,如root" autocomplete="off" class="layui-input install-input">
                   </div>

                   <div class="install-form-box">
                       <b>数据库密码</b>
                       <input type="text" name="password" placeholder="请输入数据库密码,如123456" autocomplete="off" class="layui-input install-input">
                   </div>
               </div>

                <div class="button-box">
                    <a type="button" class="layui-btn pre-btn" href="/install">上一步</a>
                    <button type="button" lay-submit lay-filter="addForm" class="layui-btn next-btn">下一步</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.all.js"></script>
<script>
    let form, element, layer;
    layui.use(['layer', 'form', 'element'], function () {
        form = layui.form;
        element = layui.element;
        layer = layui.layer;
        layer.config({
            offset: '20%'
        });
        form.on('select(type)', function(data){
            if (data.value === "mysql") {
                $("#mysql-message").show();
            } else {
                $("#mysql-message").hide();
            }
        });
        // 表单验证
        form.verify({});
        // 表单提交
        form.on('submit(addForm)', function (data) {
            install(1, data);
            return false;
        });


        /**
         * 安装
         * @param type 1: 正常,2:覆盖数据库
         * @param formData formData
         */
        function install(type,formData) {
            let loadIndex = layer.load("正在配置中...");
            formData.field.installType = type;
            $.ajax({
                type: "POST",
                url: "/install/addDatabase",
                contentType: "application/json",
                data: JSON.stringify(formData.field),
                success: function (data) {
                    layer.close(loadIndex);
                    if (data.code === 200) {
                        window.location.href = "/install/step3";
                    } else if (data.code === -1) {
                        layer.confirm('检测到数据库已存在,是否跳过数据库初始化?重新初始化数据库将造成已存在的数据丢失', {
                            icon: 3,
                            title:'提示',
                            btn:['跳过','重新安装'],
                            closeBtn: 0
                        }, function(index){
                            layer.close(index);
                            install(2, formData);
                        }, function(){
                            install(3, formData);
                        });
                    } else if(data.code === -2){
                        window.location.href = "/login";
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                },
                error: function (data) {
                    layer.close(loadIndex);
                    layer.msg("添加失败", {icon: 2});
                }
            });
        }
    });
</script>
</body>
</html>